boxSize = 6
color = #888
color2 = #aaa

body.newsfeed #content
  background #f0f0f0

.newsfeed-page
  .content
    margin-left auto
    margin-right auto
    padding 0 15px 40px
    max-width 600px

  .forum-info
    .cover
      padding 2em 0 4em
      font-size 16px
      color #f9f9f9
      background-size cover
      background-repeat no-repeat
      background-position center top
      background-image unquote("url('https://democracyosorg.s3.amazonaws.com/cover-hands.jpg')")

      .content
        padding-bottom 0

      p
        margin 0 0 1em
        font-size 1em
        font-weight 300

      .btn
        text-transform none
        padding-left 1.5em
        padding-right 1.5em

        .glyphicon
          position relative
          right -.5em
          top .15em

    .manage
      padding-top 1em
      padding-bottom 0

      p
        margin 0
        color #666
        text-align right

      a
        color inherit
        font-weight inherit

      .glyphicon
        font-size 0.8em
        margin-left 0.3em


  .forum-pagination
    display block
    position relative
    min-height 32px
    text-align center

    &.loading
      .msg-more,
      .msg-empty
        display none

      .loader
        opacity 1
        transition-delay 1s
        transition-duration .3s

    &.empty
      .msg-more
        display none

      .msg-empty
        display inline-block

    .msg-empty
      display none

    .loader
      opacity 0
      position absolute
      left 50%
      top 50%
      margin-right 8px
      margin-left 12px
      border-radius 100%
      width boxSize * 1px
      height boxSize * 1px
      box-shadow boxSize*1px boxSize*1px color2,
        boxSize*-1px boxSize*1px color,
        boxSize*-1px boxSize*-1px color2,
        boxSize*1px boxSize*-1px color
      animation spin ease infinite 4s
      transition-property opacity

@-webkit-keyframes spin {
  0%,
  100% {
      box-shadow: boxSize*1px boxSize*1px color2,
      boxSize*-1px boxSize*1px color,
      boxSize*-1px boxSize*-1px color2,
      boxSize*1px boxSize*-1px color
  }

  25% {
      box-shadow: boxSize*-1px boxSize*1px color,
      boxSize*-1px boxSize*-1px color2,
      boxSize*1px boxSize*-1px color,
      boxSize*1px boxSize*1px color2
  }

  50% {
      box-shadow: boxSize*-1px boxSize*-1px color2,
      boxSize*1px boxSize*-1px color,
      boxSize*1px boxSize*1px color2,
      boxSize*-1px boxSize*1px color
  }

  75% {
      box-shadow: boxSize*1px boxSize*-1px color,
      boxSize*1px boxSize*1px color2,
      boxSize*-1px boxSize*1px color,
      boxSize*-1px boxSize*-1px color2
  }
}

@import './forum-card/styles'
